<template>
	<view class="content">
		<!-- 头部 -->
		<view class="top">
			<view class="top-left">
				<view class="arrow top-title" @click="back"></view>
				<!-- <view class="top-title">商品</view>
				<view class="top-title">评价</view>
				<view class="top-title">详情</view> -->
			</view>
			<view class="top-right">
				<view>
					<image src="../../static/down.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 头部 end-->
		<view class="banner">
			<image :src="info.cover"></image>
		</view>
		<view class="shop-box">
			<view class="s-b-top">
				<view class="s-b-top-t">
					<text style="font-size: 30rpx;">￥</text>
					<text>{{info.price}}</text>
					<text class="s-b-price">价格</text>
					<text class="s-b-number">{{info.price}}</text>
				</view>
				<view class="s-b-c">
					{{info.name}}
				</view>
				<view class="dianpu">自营</view>
			</view>
		</view>

		<view class="bottom">
			<!-- <view class="bottom-top">
				<view class="b-t-left">
					<view class="one" style="font-weight: bold;">发货</view>
					<view class="two" style="color: #606265;">运费0元</view>
				</view>
				<view class="three">销量：<text>0</text></view>
			</view> -->

			<view class="last">
		<!-- 		<view class="tu">
					<view class="tu-icon"> 
					<image src="../../static/listen.jpg" mode="heightFix"></image>
						<view class="tu-icon-text">客服</view>
					</view>
					<view class="tu-icon">
					<image src="../../static/card.jpg" mode="heightFix"></image>
						<view class="tu-icon-text">店铺</view>
					</view>
					<view class="tu-icon">
					<image src="../../static/shop.jpg" mode="heightFix"></image>
						<view class="tu-icon-text">购物车</view>
					</view>
				</view> -->
			
				 <view class="buy-shop">
					 <view class="by-car" @click="getAddShop">立即购买</view>
				
				 </view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import api from '@/api/index.js'
		export default {
			data() {
				return {
					list:[],
					id:'',
					info:[],
				}
			},
			mounted() {
				
			},
			onLoad(option){
				 console.log(option)
					this.getDate(option.id)
			},
			methods:{
				getAddShop(id){
				
					var data={
						shop_id:this.info.id,
					}
					api.getAdd(data).then(res=>{
						if(res.code==0){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				},
				back(){
					   uni.navigateBack({
					      delta: 1,
					    });
				},
					getDate(id) {
						var data={
							id:id
						}
						api.getshopInfo(data).then((res) => {
							if (res.data.code == 0) {
								 this.info = res.data.data
								console.log( this.info)
							
							} else {
					
							}
						})
					},
				}
			
		}
</script>
<style>
	.content{
		margin-top: 100rpx;
	}
	.top {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #e0483c;
		padding-left: 40rpx;
		box-sizing: border-box;
		padding-right: 30rpx;
	}

	.top-left {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.top-title {
		font-size: 36rpx;
		color: #fff;
		margin-right: 30rpx;
	}

	.arrow:before {
		content: " ";
		display: inline-block;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		height: .5rem;
		width: .5rem;
		border-width: 0 0 2px 2px;
		border-color: #fff;
		border-style: solid;
		position: relative;
		top: 0
	}

	.top-right image {
		width: 38rpx;
		height: 38rpx;
	}

	page {
		background-color: #f5f5f5;
	}

	.banner {
		width: 100%;
		height: 700rpx;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.shop-box {
		width: 100%;
		/* height: 234rpx; */
		background-color: white;
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		border-radius: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.s-b-top-t {
		font-size: 46rpx;
		color: #ea5d29;
		display: flex;
		align-items: center;
	}

	.s-b-price {
		font-size: 28rpx;
		color: #909398;
		margin-left: 20rpx;
	}

	.s-b-number {
		font-size: 26rpx;
		color: #909398;
		text-decoration: line-through;
		padding-left: 10px;
	}

	.s-b-c {
		font-size: 27rpx;
		margin-top: 20rpx;
	}

	.dianpu {
		width: 66rpx;
		height: 32rpx;
		background-color: #f6f6ed;
		color: #f09e38;
		font-size: 22rpx;
		border: 2rpx solid #f09e38;
		text-align: center;
		line-height: 32rpx;
		border-radius: 20rpx;
		margin-top: 15rpx;

	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		/* height: 211rpx; */
		margin-top: 21rpx;
		border-bottom: 1rpx solid #bdbdbf;
		border-radius: 30rpx 30rpx 0 0;
	}

	.bottom-top {
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
	}

	.b-t-left {
		display: flex;
	}

	.b-t-left .one {
		margin-right: 30rpx;
	}
	.tu{
		display: flex;
		width: 45%;
			
		justify-content: space-around;
	}
	.tu-icon-text{
		font-size: 20rpx;
		color: #606265;
	}
	.tu-icon{
		text-align: center;
	}
	.tu-icon image{
		width: 40rpx;
		height: 40rpx;
	}
	.last{
	
		display: flex;
		width: 100%;
		padding-right: 20rpx;
	
	}
	.buy-shop{
		display: flex;
		width: 100%;
	}
	.by-car{
		    width: 100%;
		    height: 83rpx;
			line-height: 83rpx;
		    background-color: #f6ce49;
		    float: right;
			color: #fff;
		    text-align: center;
		    border-radius: 16rpx;
		 
	}
	.get{
		   width: 178rpx;
		   height: 83rpx;
		   line-height: 83rpx;
		    background-color: #e0483c;
		    float: right;
			color: #fff;
		    text-align: center;
		     border-radius:  0  30rpx 30rpx 0 ;
		
		    /* margin-right: 20px; */
	}
</style>
